<template>
    <div class="col-xs-6 col-md-6 col-lg-6 diskinfo">
        <div class="bgcolor">
            <loading v-show='!show'></loading>
            <div class="page-title">
                <h3>{{title}}</h3>
            </div>
            <transition name='fade'>             
                <div :id="id" class="pic" v-show='show'> </div>   
            </transition>
        </div>
    </div>
</template>
<script>
import loading from 'components/common/loading'
export default {
    props: {
        id:{
            type:String
        },
        name:{
            type:String
        },
        title:{
            type:String
        },
        unit:{
            type:String
        },
        picData: {
            type: Array,
            required: true
        },
        show:{
            type:Boolean,
            required:true
        }
    },
    data: function() {
        return {
            intervalid: null,
            num:0,
            color:''
        }
    },
    mounted() {
        if (this.themeColor ==='blue') {
            this.color = '#57a3f3'
        } else if (this.themeColor ==='red') {
            this.color= '#d8252f'
        }
    },
    beforeDestroy: function() {
        clearInterval(this.intervalid)
    },
    watch:{
        picData:function() {
            if (this.num==0) {
                this.loadSpline(this.picData)
                this.num++
                this.intervalid = setInterval(() => {
                    let chart = $("#"+this.id).highcharts()
                    let x = this.picData.pop().timestamp*1000?this.picData.pop().timestamp*1000:0
                    let y = 0
                    if (this.id === 'node') {
                        y = this.picData.pop().value.count-0?this.picData.pop().value.count-0:0
                    } else {
                        y = Number(Number(this.picData.pop().value.used) / Number(this.picData.pop().value.total)).toFixed(3) * 100 
                        ? Number(Number(this.picData.pop().value.used) / Number(this.picData.pop().value.total)).toFixed(3) * 100 : 0   
                                         
                    }
                    chart.series[0].addPoint([x,y],true,true)           
                },10000)
            }
        }
    },
    methods: {
        loadSpline(picData) {
            let _this =this  
            Highcharts.setOptions({
                global: {
                    useUTC: false
                },
                // colors: ['#31c609', '#41a7fd'],
                credits: {
                    enabled: false // 禁用版权信息
                },
                exporting: {
                    enabled: false
                },
                legend: {
                    enabled: false
                }                
            })
            Highcharts.chart(this.id,{
                chart: {
                    type:_this.id=='node'?'line':'spline',
                    plotBackgroundColor: '#eeeeee',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10
                },
                title: {
                    text: null,
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        millisecond: '%H:%M:%S'
                    },
                    tickPixelInterval:120,//刻度线的像素间隔
                    tickWidth: 0,
                    gridLineColor: 'rgba(255,255,255,0.5)',
                    gridLineWidth: 1,
                    gridLineDashStyle: 'Dash',
                    crosshair:{
							dashStyle:'dash',
                            color:'lightgray'
						}
                },
               
                yAxis: {
                    title: {
                        text: null
                    },
                    gridLineColor: 'rgba(255,255,255,0.5)',
                    gridLineWidth: 1,
                    lineColor: _this.color,
                    tickInterval: 20,
	                min:0, // 定义最小值  
	                minPadding: 0.2,   
	                maxPadding: 0.2, 
                    crosshair:{
                        dashStyle:'dash',
                        color:'#fff'
                    },
                    labels: {
                        formatter: function() {
                            if (_this.id=='node') {
                                return this.value+'<span style="color:#aaa">(个)</span>';
                            } else {
                                return this.value+'%';                             
                            }
                        }
                    } 
                },
                tooltip: {
                	formatter: function () {
                        if (_this.id=='node') {
                            return '<b></b>'
			                +Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>'+_this.name+':'
			                +Highcharts.numberFormat(this.y, 0)+'个';
                        } else {
                            return '<b></b>'
                            +Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>'+_this.name+':'
                            +Highcharts.numberFormat(this.y,1)+'%';
                        }
		               
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                lang: {
                    noData: "暂无数据"
                },
				noData: {
                    style: {
                        fontSize: '15px',
                        color:_this.color
                    }
				},
                format:{y:'%H:%M:%S'},
                series: [{
                    lineWidth: 2,
                    shadow: true,
                    color:_this.color,
                    marker: {
                        fillColor:_this.color,
                        radius: 0,
                        states:{
                            hover:{
                                enabled:true,
                                fillColor: _this.color,
                                radius:4,
                            }
                        }
                    },
                    data: (function () {
                        let data = [];
                        let obj = {}
                        if (_this.id === 'node') {
                            for(let j = 0; j < picData.length; j++) {
								obj = {
									x: picData[j].timestamp*1000,
									y: picData[j].value.count-0 ? picData[j].value.count-0:0
								}
								data.push(obj)
                            }
                        } else if (_this.id === 'memory') {
                            for(let k = 0; k < picData.length; k++) {
                                obj = {
                                    x: picData[k].timestamp*1000,
                                    y: Number(Number(picData[k].value.used) / Number(picData[k].value.total)).toFixed(3)
                                    * 100 ? Number(Number(picData[k].value.used) / Number(picData[k].value.total)).toFixed(3) * 100:0
                                }
                                data.push(obj)
                            }
                        } else {
                            for(let k = 0; k < picData.length; k++) {
                                obj = {
                                    x: picData[k].timestamp*1000,
                                    y: Number(picData[k].value.user).toFixed(1)
                                    * 100 ? Number(picData[k].value.user).toFixed(1) * 100:0
                                }
                                data.push(obj)
                            }
                        }
                            
                        return data;
                    } ())
                }]
            })
            let chart = $("#"+this.id).highcharts()
             if (this.id!=='node') {
                chart.yAxis[0].setExtremes(0,100); 
            } 
        }
    },
    components:{
        loading
    }
}
</script>
<style scoped>
    .pic{
        width: 520px;
        height: 300px;
        margin: 20px;
    }
</style>
